What is...

2018-06-15

Note: While starting to get familar with JavaScript, fiddling with APIs were one of my first set of projects and I believe it was either the first or second where I hit some sort of snag that led me to this thing called CORS. From then on it was something I could vaguely recall, but not word very well so I made myself this little post.

What is CORS?

Cross-Orgin Resource Sharing (CORS)

A way to tell a browser to let a web app running at one domain have access to selected resources from a server at a different domain.

While a page may freely embed cross-orgin videos, there are certain requests, such as with AJAX that are not allowed by default by same-orgin security.

Note: Same-Orgin Policy, a browser allows 1st location access to data in a 2nd location ONLY if both locations show same origin (ex: protocol (like url), host, port). It is in place to prevent scripts from obtaining access to sensitive data through the DOM ( Document Object Model).

Cross-origin request example would Javascript client-side code served from Domain A requesting api data from Domain B only possible by including the right CORS headers as with XMLHttpRequest and Fetch API.

Other requests that use CORS?

  • Web Fonts (@font-face in CSS)
  • WebGL textures
  • Images/Video frames using drawImage
  • Stylesheets
  • Scripts

References: MDN Cross-Origin Resource Sharing


← go back